<template>
<!--  抖动-->
  <div class="zhuye">
    <Navbar>
      <template v-slot:center>
        <h3>购物车</h3>
      </template>
    </Navbar>
    <PublicScroll
        ref="scroll"
        v-bind:probeType="3"
        v-bind:pullUpLoad="true"
        @scrollY="changeIsShow"
        @loadMore="loadMoreGoods">
      <SwiperArea v-bind:banners="banners" @swiperImageLoad="swiperImageLoad"></SwiperArea>
      <HomeRecommendView v-bind:recommends="recommends"></HomeRecommendView>
      <FeatureView></FeatureView>
      <TabControl ref="tabControl" :titles="['流行','最新','热卖']" v-on:tabClick="tabClick"></TabControl>
      <Suspense>
        <template v-slot:default>
          <GoodsList v-bind:goods="goodsList"></GoodsList>
        </template>
        <template v-slot:fallback>
          <h3>数据加载中</h3>
        </template>
      </Suspense>
    </PublicScroll>
    <BackTop v-show="isShow" v-on:click="backStart1"></BackTop>
  </div>
</template>
<script>
import Navbar from '@/components/common/navbar/NavBar'
import SwiperArea from '@/components/common/swiper/SwiperArea'
import PublicScroll from  '@/components/common/scroll/PublicScroll'

import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from '@/components/content/goods/GoodsList'
import BackTop from '@/components/content/backTop/BackTop'

import HomeRecommendView from '@/views/square/childComps/HomeRecommendView'
import FeatureView from '@/views/square/childComps/FeatureView'
import {getHomeMultidata,getHomeGoods} from "@/network/home";
import {backTopFunc,debounce} from '@/utils/hook'

import {ref, onMounted, reactive, computed} from "vue";


import {getBus} from "@/utils/BqBus";
export default {
  name: "BpSquare",
  setup(){
    //属性
    let banners=ref([])
    let recommends=ref([])
    const tabControl=ref(null)
    let currentType=ref('pop')
    let goods=reactive({
      pop:{page:0,list:[]},
      new:{page:0,list:[]},
      sell:{page:0,list:[]},
    })
    const scroll=ref(null)
    const publicBus=getBus()
    const {isShow,backStart} =backTopFunc()
    let clearRefresh=ref(null)
    //计算属性
    let goodsList=computed(()=>{
      return goods[currentType.value].list
    })
    //emit方法
    function swiperImageLoad(){
      //在swiper加载完之后，拿到tabControl距离顶部的距离
      // console.log(tabControl.value.$el.offsetTop)
    }
    //方法
    function backStart1(){
      if(scroll.value){
        backStart(scroll.value)
      }
    }
    function changeIsShow(position){
      isShow.value=-position>200
    }
    function loadMoreGoods(){
      getHomeGoodsList(currentType.value)
      if(scroll.value){
        scroll.value.scrollRefresh()
      }
    }
    function tabClick(index){
      switch(index){
        case 0:
          currentType.value='pop'
          break
        case 1:
          currentType.value='new'
          break
        case 2:
          currentType.value='sell'
          break
      }
      tabControl.value.currentIndex=index
    }
    function getHomeGoodsList(type){
      const page=goods[type].page+1
      getHomeGoods(type,page).then(res=>{
        goods[type].list.push(...res.data.list)
        goods[type].page+=1
      })
    }
    //生命周期
    onMounted(()=>{
      getHomeMultidata().then(res=>{
        banners.value=res.data.banner.list
        recommends.value=res.data.recommend.list
      })
      getHomeGoodsList('pop')
      getHomeGoodsList('new')
      getHomeGoodsList('sell')

      const refresh =debounce(scroll.value.scrollRefresh,200)
      clearRefresh=()=>{
          refresh()
      }
      publicBus.on('itemImageLoad',clearRefresh)
    })
    return{
      banners,
      recommends,
      tabControl,
      goods,
      goodsList,
      scroll,
      isShow,backStart1,
      //方法
      swiperImageLoad,
      tabClick,
      changeIsShow,
      loadMoreGoods
    }
  },
  components:{
    Navbar,SwiperArea,PublicScroll,
    TabControl,GoodsList,BackTop,
    HomeRecommendView,FeatureView
  }
}
</script>
<style scoped>
h3{
  line-height: 44px;
}
.zhuye{
  height: 100vh;
}
</style>